<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
    <script src="../js/api.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .searchCon {
            width: 400px;
            height: 40px;
            outline: none;
            margin-left: 20px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <input type="text" class="searchCon">
</body>
<script>

    // 函数防抖: 
    // 如果一个函数短时间内连续触发,只执行最后一次


    // 未处理版
    /* var searchCon = document.querySelector(".searchCon");

    searchCon.addEventListener("input", searchHandler);

    async function searchHandler(e) {
        // 模拟搜索处理  
        // this-> searchCon
        // e   -> 事件对象

        var wd = this.value;
        console.log(wd);

        var result = await searchGradeOrderLimit({ wd, col: "id", type: "asc", page: 1, size: 10 })
        var { status, message, list } = result;
        if (status) {
            console.log("请求成功");
        }
    } */



    var searchCon = document.querySelector(".searchCon");

    var debounceHandler = debounce(searchHandler);
    searchCon.addEventListener("input", debounceHandler);
    // searchCon.addEventListener("input", debounce(searchHandler));


    /* var timer = null;
    function debounceHandler(e) { // 防抖处理(添加延时器) => 如果函数短时间内(300ms)连续触发 => 先清除上一次,在启动下一次
        // this -> searchCon
        // e -> 事件对象


        clearTimeout(timer);
        timer = setTimeout(() => {
            // searchHandler(); // search函数调用是没有依存的对象(this->window),也没有事件对象
            searchHandler.call(this, e); // 此写法this直线已经处理好了,但是考虑到后期封装的函数可能要接收多个参数

        }, 300);
    } */


    /* var timer = null;
    function debounceHandler(...list) { // 防抖处理(添加延时器) => 如果函数短时间内(300ms)连续触发 => 先清除上一次,在启动下一次
        // this -> searchCon
        // list => 将debcounceHandler接收的参数存到数组中


        clearTimeout(timer);
        timer = setTimeout(() => {
            // searchHandler(); // search函数调用是没有依存的对象(this->window),也没有事件对象
            // searchHandler.call(this, ...list); // 此写法this直线已经处理好了,将debcounceHandler接收的参数依次传到数组中
            searchHandler.apply(this, list); // 此写法this直线已经处理好了,将debcounceHandler接收的参数依次传到数组中
        }, 300);
    } */

    // 对防抖处理进行封装   => 传入需要处理的函数,和时间 => 返回对应的防抖处理函数
    function debounce(callback, delay = 300) {
        var timer = null;
        return function (...list) { // 防抖处理函数(添加延时器) => 如果函数短时间内(300ms)连续触发 => 先清除上一次,在启动下一次
            // this -> searchCon
            // list => 将debcounceHandler接收的参数存到数组中


            clearTimeout(timer);
            timer = setTimeout(() => {
                // callback(); // search函数调用是没有依存的对象(this->window),也没有事件对象
                // callback.call(this, ...list); // 此写法this直线已经处理好了,将debcounceHandler接收的参数依次传到数组中
                callback.apply(this, list); // 此写法this直线已经处理好了,将debcounceHandler接收的参数依次传到数组中
            }, delay);
        };
    }


    /* function debounce(callback, delay = 300) {
        var timer = null;
        return function (...list) { // 防抖处理函数(添加延时器) => 如果函数短时间内(300ms)连续触发 => 先清除上一次,在启动下一次
            // this -> searchCon
            // list => 将debcounceHandler接收的参数存到数组中

            return new Promise((resolve, reject) => {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    // callback(); // search函数调用是没有依存的对象(this->window),也没有事件对象
                    // callback.call(this, ...list); // 此写法this直线已经处理好了,将debcounceHandler接收的参数依次传到数组中
                    try {
                        var result = callback.apply(this, list); // 此写法this直线已经处理好了,将debcounceHandler接收的参数依次传到数组中
                        resolve(result);
                    } catch (err) {
                        reject(err);
                    }
                }, delay);
            })
        };
    } */



    async function searchHandler(e) {
        // 模拟搜索处理

        console.log(this);
        console.log(e);

        var wd = this.value;
        // console.log(wd);


        if (wd) {
            var result = await searchGradeOrderLimit({ wd, col: "id", type: "asc", page: 1, size: 10 })
            var { status, message, list } = result;
            if (status) {
                console.log("请求成功");
            }
        }


    }


    function sum(a, b) {
        console.log(a, b);
        return a + b;
    }



    var debounceSum = debounce(sum);

    // debounceSum(1, 2);
    // debounceSum(10, 20);
    // // var result = debounceSum(100, 200);
    // // console.log(result);

    // debounceSum(100, 200).then(res => {
    //     console.log(111, res);
    // }).catch(err => {
    //     console.log(222, err);
    // })


</script>

</html>